<template>
  <div class="v-shape-style-image-box-config">
    <div class="_table-body g-relative">
      <div
        v-for="(row, index) in shapeImageBoxModel.shapeStyleInfo"
        :key="index"
        class="g-flex _table-row g-ov-hidden"
        :class="{ '_current-row': row.key === currentKey }"
        @click="handleCilckRow(row)"
      >
        <div
          v-show="row.key === currentKey"
          class="_table-body-icon"
        >
          <img src="statics/icons/app/arrowchoose.svg" />
        </div>
        <div
          class="g-flex-0 _cell _name-column g-one-line"
          :style="{ width: '110px' }"
        >
          {{ locale.value === "en" ? row.enName || $t("propertyConfig." + row.key) : row.name }}
        </div>

        <div class="g-flex-1 _cell _value-column">
          <component
            :is="valueCompsMap[row?.key]"
            v-if="valueCompsMap[row?.key]"
            :row="row"
            :projectId="shapeCustomizationManagementModel.queryParams.projectId"
            :modelId="shapeCustomizationManagementModel.queryParams.modelId"
            :selected="row.key === currentKey"
            :configurationDisabled="
              shapeCustomizationManagementModel.configurationDisabled || shapeCustomizationManagementModel.isModelDisabled
            "
            @changeImage="changeImage"
          ></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ShapeCustomizationManagementModel,
  ShapeStyleValue
} from "@/modules/model/modals/shapeCustomization/ShapeCustomizationManagementModel";
import { reactive, ref } from "vue";

import { locale } from "@/util/locale";
import {
  ShapeImageBoxModel,
  valueCompsMap
} from "@/modules/model/modals/shapeCustomization/comps/ShapeImageBoxConfiguration/ShapeImageBoxConfigurationModel";

const props = defineProps<{
  shapeCustomizationManagementModel: ShapeCustomizationManagementModel;
}>();

const shapeImageBoxModel: ShapeImageBoxModel = reactive(props.shapeCustomizationManagementModel?.shapeImageBoxModel);
const currentKey = ref("");
//
function handleCilckRow(row: ShapeStyleValue) {
  currentKey.value = row.key;
}

function changeImage(imgUrl: string, key: string) {
  shapeImageBoxModel.updateValue(imgUrl, key);
}
</script>

<style scoped lang="scss">
@import "@/assets/css/theme.scss";
.v-shape-style-image-box-config {
  height: 100%;
  overflow: hidden;
  display: flex;
  ._table-body {
    padding: 16px;
    flex: 1;
    overflow: auto;
    ._table-row:nth-of-type(even) {
      background: $nth-of-type-bg-color;
    }
  }
  ._table-body-icon {
    position: absolute;
    left: 4px;
    margin-top: 4px;
  }
  ._cell {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    box-sizing: border-box;
    font-size: 11px;
    line-height: 24px;
  }
  ._name-column {
    padding: 0 8px;
  }
  ._value-column {
    padding: 0;
    line-height: 24px;
    overflow-x: hidden;
    border-right: 1px solid #ddd;
  }

  ._current-row {
    ._cell {
      border-top-color: $theme-color;
      border-left-color: $theme-color;
    }

    ._name-column {
      padding: 0 8px;

      background: $theme-color;
      color: white;
    }
    ._value-column {
      box-sizing: border-box;
      line-height: 24px;
      border-right-color: $theme-color;
    }
  }
  ._current-row + ._table-row {
    line-height: 24px;
    ._cell {
      border-top-color: $theme-color;
    }
  }
  ._table-row:last-of-type {
    ._cell {
      border-bottom: 1px solid #ddd;
    }
  }
  ._table-row._current-row:last-of-type {
    ._cell {
      border-bottom: 1px solid $theme-color;
    }
  }
}
</style>
